.m{
    width: 200px;
    height: 200px;
    background: red;
    margin: 20px auto;
    -webkit-transition: width;
    transition: width;
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-delay: .18s;
        transition-delay:.18s;
  }
  .m:hover {
    width: 400px;
  }
  .n {
    width: 300px;
    height: 200px;
    background-color: orange;
    margin: 20px auto;
    -webkit-transition-property: height;
    transition-property: height;
    -webkit-transition-delay: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;/*减速*/
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
  }
  .n:hover {
    height: 100px;
    /* h100 */
  }
  .v{
    width: 200px;
    height: 200px;
    background: red;
    margin: 20px auto;
    -webkit-transition-property: -webkit-border-radius;
    transition-property: border-radius;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-in-out;/*transition-timing-function:linear;恒速*/
    transition-timing-function: ease-in-out;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
  }
  .v:hover {
    border-radius: 100%;
    /* bgc#eee; */
    /* m10-10 */
    /* p10-10 */
    /* border10-solid-yellow */
    /* f-c */
    /* m-t */
    /* mar-t */
  }